<template>
	<view class="quotationSuccess">
		<view class="card">
			<view class="result">
				<image src="@/static/image/success.png" class="result-icon"></image>
				<text class="result-message">报价成功</text>
				<!-- <view class="result-amount">
					<text class="smallFont">共计</text>
					<text class="largeFont">{{numFormat(product.amount)}}</text>
					<text class="smallFont">元</text>
				</view>
				<view class="result-amount">
					<text class="smallFont">单条价格</text>
					<text class="middleFont">{{numFormat(product.unit_amount)}}</text>
					<text class="smallFont">元</text>
				</view> -->
			</view>
			<uni-list :border="false">
				<uni-list-item :border="false" class="title-box">
					<template v-slot:header>
						<view class="title">
							<text>信息详情</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- <uni-list class="product">
				<uni-list-item>
					<template v-slot:header>
						<view class="image-box" v-if="product.image">
							<image :src="product.image"></image>
						</view>
						<view class="image-default-box" v-else>
							<image mode="widthFix" style="width: 40rpx;" src="@/static/image/default.png"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="product-content">
							<view class="product-name">
								{{product.name}}
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list> -->
			<uni-list :border="false">
				<uni-table border stripe emptyText="暂无更多数据" v-if="product.lines.length > 0">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="100" align="center">型号</uni-th>
						<uni-th width="100" align="center">数量</uni-th>
						<uni-th width="100" align="center">销售单价</uni-th>
						<uni-th width="100" align="center">销售金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in product.lines" :key="item.id">
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">
							<text>{{item.product_qty}}</text>
						</uni-td>
						<uni-td align="center">
							<text>{{item.proposed_price_unit}}</text>
						</uni-td>
						<uni-td align="center">
							<text>{{item.proposed_sale_amount}}</text>
						</uni-td>
					</uni-tr>
				</uni-table>
				<quotation-fields :fields="product.fields" :is_customized="is_customized"
					v-if="product.fields && product.fields.length > 0"></quotation-fields>
			</uni-list>
		</view>
		<view class="btn" @click="toBack">返回</view>
		<safe-area></safe-area>
	</view>
</template>

<script>
	import {
		getConfirmedQuotationData,
	} from "@/api/call_kw.js";
	export default {
		data() {
			return {
				id: '',
				product: {
					// amount: 0,
					// unit_amount: 0,
					fields: [],
					lines: [],
				},
				is_customized: false,
			}
		},
		onLoad(options) {
			this.id = options.id || '';
			this.getInfo();
		},
		methods: {
			getInfo() {
				getConfirmedQuotationData({
					id: this.id,
				}).then(res => {
					if (res.data?.result) {
						if (res.data.result.success) {
							this.is_customized = res.data?.result?.datas?.display_type_name === '定制类';
							let fields = [];
							if (res.data.result?.lines?.length > 0) {
								fields = [{
									do_type: 'readonly',
									name: "印刷类型",
									field_name: "print_type",
									value: ""
								}, {
									do_type: 'readonly',
									name: "销售价格",
									field_name: "sale_amount",
									value: ""
								}, {
									do_type: 'readonly',
									name: "让利幅度",
									field_name: "rebate_range",
									value: ""
								}, {
									do_type: 'readonly',
									name: "实际销售金额",
									field_name: "final_sale_price",
									value: ""
								}, {
									do_type: 'readonly',
									name: "订单数量",
									field_name: "quantity",
									value: ""
								}, {
									do_type: 'readonly',
									name: "客户",
									field_name: "partner_id",
									value: ""
								}, {
									do_type: 'readonly',
									name: "收货地区",
									field_name: "destination",
									value: ""
								}]
							} else {
								fields = [{
										do_type: 'readonly',
										name: "正面宽",
										field_name: "front_width",
										sequence: 1,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "高",
										field_name: "height",
										sequence: 2,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "侧宽",
										field_name: "side_width",
										sequence: 3,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "订单数量",
										field_name: "quantity",
										sequence: 4,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "含运费最低报价",
										field_name: "lowest_quotation_with_freight",
										sequence: 5,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "不含运费最低报价",
										field_name: "lowest_quotation_without_freight",
										sequence: 6,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "颜色数量",
										field_name: "color_quantity",
										sequence: 7,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "版费",
										field_name: "plate_cost",
										sequence: 8,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "含运费总金额",
										field_name: "freight_amount",
										sequence: 9,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "不含运费总金额",
										field_name: "non_freight_amount",
										sequence: 10,
										value: ""
									},
									{
										do_type: 'readonly',
										name: "收货地区",
										field_name: "destination",
										sequence: 11,
										value: ""
									},
								];
							}
							fields.forEach(x => {
								x.value = res.data?.result?.order?.find(y => y.field_name === x.field_name)?.value;
							});
							// 让利幅度为0,销售价格不显示
							if (!fields?.find?.(x => x.field_name === 'rebate_range')?.value && fields?.findIndex?.(x => x
									.field_name === 'sale_amount') > -1) {
								fields.splice(fields.findIndex(x => x.field_name === 'sale_amount'), 1);
							}
							this.product.fields = fields.filter(x => x.value);
							this.product.lines = res.data.result?.lines.filter(x => x.find?.(x => x.field_name === 'product_qty')
								?.value > 0).map(x => {
								return {
									name: x.find(x => x.field_name === 'name').value,
									product_qty: x.find(x => x.field_name === 'product_qty').value,
									proposed_price_unit: x.find(x => x.field_name === 'proposed_price_unit').value?.toFixed(2) ||
										0,
									proposed_sale_amount: x.find(x => x.field_name === 'proposed_sale_amount').value?.toFixed(0) ||
										0,
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data?.result?.message || '获取失败',
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data?.error?.data?.message || '获取失败',
						})
					}
				}).catch((e) => {
					console.error(e);
					uni.showToast({
						icon: 'none',
						title: '系统错误',
					})
				})
			},
			image_base64(photo) {
				return 'data:image/jpeg;base64,' + photo;
			},
			// 数字千分位,分割
			numFormat(num) {
				let res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
					return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
						return $1 + ",";
					});
				})
				return res;
			},
			toBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quotationSuccess {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.card {
			width: 700rpx;
			margin: 24rpx 0;
			background-color: white;

			.result {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 80rpx 0 40rpx;

				.result-icon {
					width: 90rpx;
					height: 90rpx;
					margin-bottom: 36rpx;
				}

				.result-message {
					font-size: 36rpx;
					color: black;
					margin-bottom: 40rpx;
				}

				.result-amount {
					display: flex;
					align-items: flex-end;
					line-height: 1;
					color: #3F7CFB;

					.largeFont {
						font-size: 80rpx;
						margin: 0 0.1em;
						font-weight: bold;
					}

					.middleFont {
						font-size: 50rpx;
						margin: 0 0.1em;
						font-weight: bold;
					}

					.smallFont {
						font-size: 28rpx;
					}
				}
			}

			uni-list {
				width: 100%;
			}

			.title-box {
				/deep/.uni-list-item__container {
					padding-left: 0 !important;
				}

				.title {
					display: flex;
					align-items: center;

					&::before {
						content: '';
						width: 8rpx;
						height: 50rpx;
						border-radius: 4rpx;
						background-color: #3F7CFB;
						margin-right: 36rpx;
						flex-shrink: 0;
					}

					text {
						font-size: 32rpx;
						color: #3F7CFB;
					}
				}
			}

			.product {
				/deep/.uni-list-item__container {
					padding: 44rpx !important;
				}

				.image-box {
					width: 130rpx;
					height: 130rpx;

					image {
						width: 130rpx;
						height: 130rpx;
					}
				}

				.image-default-box {
					width: 130rpx;
					height: 130rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $uni-bg-color;

					image {
						width: 36rpx;
					}
				}

				.product-content {
					width: 100%;
					display: flex;
					flex-direction: column;
					padding-left: 30rpx;
					justify-content: center;

					.product-name {
						padding: 6rpx;
						word-break: break-all;
						font-size: 38rpx;
						color: #34353A;
						// margin-bottom: 24rpx;
					}

					// .product-tags {
					// 	width: 100%;
					// 	display: flex;
					// 	flex-wrap: wrap;

					// 	.product-tag-box {
					// 		padding: 6rpx;

					// 		.product-tag {
					// 			padding: 6rpx 16rpx;
					// 			border-radius: 10rpx;
					// 			background-color: #F0F4FE;
					// 			font-size: 24rpx;
					// 			line-height: 1;
					// 			color: #3F7CFB;
					// 		}
					// 	}
					// }
				}
			}
		}

		.btn {
			margin: 30rpx auto;
			width: 380rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #3F7CFB;
			line-height: 80rpx;
			text-align: center;
			color: white;
		}
	}

	/deep/.quotation-fields {
		uni-list {
			.uni-list {
				flex-wrap: wrap;
				flex-direction: row;
			}
		}
	}

	/deep/.uni-table {
		min-width: unset !important;

		.uni-table-td,
		.uni-table-th {
			font-size: 24rpx !important;
		}

		.uni-table-td {
			vertical-align: middle;
		}
	}
</style>